import {Component, EventEmitter, Output} from "@angular/core";

@Component({
    selector:"image-selector",
    template:`
    <div class="image-selector"><input accept="image/*" type="file" (change)="imageChanged($event)"/></div>
    
  `,
    styles:[
        `
      .image-selector{
        height:100%;
        width:100%;
        border:1px dashed var(--borderColor);
        font-size:300%;
        position:relative;
        vertical-align: middle;
        text-align:center;
        margin:5px auto;
      }
      .image-selector:before{
        content:"+";
      }
      input[type=file]{
        opacity: 0;
        height: 100%;
        width: 100%;
        left:0;
        display: inline-block;
        position: absolute;
      }
    `
    ]
})
export class ImageSelectorComponent{
    @Output() imageSelected:EventEmitter<any>=new EventEmitter<any>();
    imageChanged(evt){
        this.imageSelected.emit(evt);
    }
}